<template>
    <div class="box-card box-minheight">
        <div class="card-header">
            <span>{{ curRouteName }}</span>
        </div>
        <div class="box-content">
            <el-form :inline="true" :model="formInline">
                <el-form-item label="分类名称">
                    <el-select v-model="formInline.className" placeholder="请选择分类名称" clearable filterable>
                        <el-option label="源" value="0" />
                        <el-option label="储" value="1" />
                        <el-option label="荷" value="2" />
                        <!-- <el-option label="电网参数" value="3" />
                        <el-option label="发电机组" value="4" />
                        <el-option label="负荷监测" value="5" />
                        <el-option label="储能设备" value="6" />
                        <el-option label="太阳能光伏" value="7" />
                        <el-option label="风力发电" value="8" />
                        <el-option label="逆变器监测" value="9" />
                        <el-option label="电表" value="10" /> -->
                    </el-select>
                </el-form-item>
                <el-form-item label="设备名称">
                    <el-select v-model="formInline.deviceName" placeholder="请选择设备名称" clearable filterable>
                        <el-option label="1号电表" value="0" />
                        <el-option label="2号逆变器" value="1" />
                        <el-option label="3号电表" value="2" />
                    </el-select>
                    <!-- <el-input v-model="formInline.user" placeholder="请输入设备名称查询" clearable /> -->

                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search">搜索</el-button>
                    <el-button type="primary" size="default" @click="reset">重置</el-button>
                </el-form-item>
            </el-form>

            <!-- <div class="alert">
                <div class="alert-Content">
                    <div class="alert-left">
                        <el-icon :size="20" color="#409EFC">
                            <WarningFilled />
                        </el-icon>
                        异常设备:<span class="red-text">0</span>
                    </div>
                    <div class="alert-right">
                        <el-icon :size="20" color="#409EFC">
                            <Refresh />
                        </el-icon>
                        刷新
                    </div>
                </div>
            </div> -->
            <div style="margin: 10px 0px;">
                <el-button type="primary" size="default">刷新</el-button>
            </div>
            <div>
                <el-table :data="alarmData" :height="tableHeight" border>
                    <el-table-column prop="alarmId" label="报警序号"></el-table-column>
                    <el-table-column prop="categoryName" label="分类名称"></el-table-column>
                    <el-table-column prop="deviceId" label="设备名称"></el-table-column>
                    <el-table-column prop="alarmName" label="报警名称"></el-table-column>
                    <el-table-column prop="alarmValue" label="报警值"></el-table-column>
                    <el-table-column prop="alarmTime" label="报警时间"></el-table-column>
                </el-table>
                <!-- 分页器 -->
                <el-pagination class="mt15" v-model:current-page="pageNo" v-model:page-size="pageSize"
                    :page-sizes="[5, 7, 9, 11]" :background="true" layout="prev, pager, next, jumper,->,sizes,total"
                    :total="total" @current-change="getDetails" @size-change="handler" />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router'
import { ref, computed, reactive, onMounted, onBeforeUnmount } from 'vue'

//获取路由对象
let $route = useRoute()
// 计算出当前路由名称
let curRouteName = computed(() => {
    return $route.matched[$route.matched.length - 1].meta.title
})
const formInline = reactive({
    className: '0',
    deviceName: '2',
})
const search = () => {
    console.log('submit!')
}
//重置按钮
const reset = () => {
}
interface AlarmData {
    alarmId: number;
    categoryName: string;
    deviceId: string;
    alarmName: string;
    alarmTime: string;
    alarmValue: number;


}
const alarmData = ref<AlarmData[]>([
    {
        alarmId: 1,
        categoryName: '源',
        deviceId: '1号电表',
        alarmName: '电流过载',
        alarmTime: '2022-01-01 12:00:00',
        alarmValue: 1
    },
    {
        alarmId: 2,
        categoryName: '源',
        deviceId: '1号逆变器',
        alarmName: '电流过载',
        alarmTime: '2023-11-01 12:00:00',
        alarmValue: 2
    },

]);

//默认页码
let pageNo = ref<number>(1);
//一页展示几条数据
let pageSize = ref<number>(5);
//总个数
let total = ref<number>(0);
//获取全部已有的用户信息
const getDetails = async (pager = 1) => {
    //收集当前页码
    pageNo.value = pager;
    // let result: UserResponseData = await reqUserInfo(pageNo.value, pageSize.value, keyword.value);
    // if (result.code == 200) {
    //     total.value = result.data.total;
    //     userArr.value = result.data.records;
    // }
}
//分页器下拉菜单的自定义事件的回调
const handler = () => {
    getDetails();
}
const tableHeight = ref(0); // 表格高度
// 计算表格高度的函数
const calculateTableHeight = () => {
    const windowHeight = window.innerHeight - 180; // 获取窗口高度
    const tableHeaderHeight = 40; // 表格头部高度
    const tablePaginationHeight = 60; // 表格分页高度
    const padding = 20; // 上下边距
    tableHeight.value = windowHeight - tableHeaderHeight - tablePaginationHeight - padding;
};

// 监听窗口大小变化，动态计算表格高度
const handleResize = () => {
    calculateTableHeight();
};
onMounted(() => {
    calculateTableHeight();
    window.addEventListener('resize', handleResize);
});

onBeforeUnmount(() => {
    window.removeEventListener('resize', handleResize);
})

</script>

<style scoped lang="scss">
.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}

.el-tabs--right .el-tabs__content,
.el-tabs--left .el-tabs__content {
    height: 100%;
}
</style>